import { useState, useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import {
  Form,
  Input,
  Textarea,
  Row,
  Col,
  DatePicker,
  Button,
  MessagePlugin,
} from 'tdesign-react'
import SearchSelect from '@/components/Form/SearchSelect'
import type { SubmitContext, Data } from 'tdesign-react'
import moment from 'moment'
import { ApiRequest, apis } from '@/service'

const {
  insertModule,
  getModuleItem,
} = apis.BMService.project

const { FormItem, useForm } = Form

const AddModule = () => {

  const location = useLocation()

  const { id } = location.state || {}

  const navigate = useNavigate()
  const [formRef] = useForm()

  useEffect(() => {
    id && getModuleItemFnc()
  }, [id])

  const getModuleItemFnc = () => {
    const params = {
      id,
    }
    ApiRequest({ api: getModuleItem, params }).then((res: ResponseDataType) => {
      const { code = -1, data = [{}], note = '' } = res
      if (code > 0) {
        formRef.setFieldsValue(data[0])
      } else {
        MessagePlugin.error({ content: note, placement: 'top-right', duration: 2000 })
      }
    })
  }

  const onSubmit = (context: SubmitContext<Data>) => {
    console.log(context)
    if (context.validateResult === true) {
      const params = {
        ...context.fields,
        id,
      }
      console.log(params)
      ApiRequest({ api: insertModule, params }).then((res: ResponseDataType) => {
        const { code = -1, data = [], note = '' } = res
        if (code > 0) {
          MessagePlugin.success({
            content: note || '提交成功',
            placement: 'top-right',
            duration: 2000})
          navigate(-1)
        } else {
          MessagePlugin.error({
            content: note || '提交失败',
            placement: 'top-right',
            duration: 2000})
        }
      })
    } else {
      MessagePlugin.error({
        content: context.firstError || '',
        placement: 'top-right',
        duration: 2000})
    }
  }

  return <div className={'content-wrapper'}>
    <Form
      form={formRef}
      onSubmit={onSubmit}
      className='aio-form'
      labelWidth={140}
      resetType='initial'
    >
      <Row gutter={16}>
        <Col span={6}>
          <FormItem name='projectName' label='项目名称' rules={[{ required: true, message: '请选择所属项目' }]}>
            <SearchSelect
              label='项目名称'
              placeholder='请选择所属项目'
              dictionary='ProjectList'
              isCustomize
            />
          </FormItem>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={6}>
          <FormItem name='moduleName' label='模块名称' rules={[{ required: true, message: '请输入模块名称' }]}>
            <Input placeholder='请输入模块名称' clearable />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem name='moduleLeader' label='模块负责人' rules={[{ required: true, message: '请选择模块负责人' }]}>
            <SearchSelect
              label='人员'
              placeholder='请选择模块负责人'
              dictionary='UserList'
              isCustomize
            />
          </FormItem>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={6}>
          <FormItem name='startDate' label='开始日期' initialData={moment().format('YYYY-MM-DD')}>
            <DatePicker
              placeholder='请选择开始日期'
            />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem name='endDate' label='结束日期' initialData={moment().add(1, 'y').format('YYYY-MM-DD')}>
            <DatePicker
              placeholder='请选择结束日期'
            />
          </FormItem>
        </Col>
      </Row>
      <FormItem name='moduleDesc' label='模块描述'>
        <Textarea
          placeholder='请输入模块描述'
          maxlength={200}
          autosize={{ maxRows: 4 }}
        />
      </FormItem>
      <Row gutter={16}>
        <Col span={6}>
          <FormItem name='moduleMember' label='开发成员'>
            <SearchSelect
              label='人员'
              placeholder='请选择开发成员'
              dictionary='UserList'
              isCustomize
              multiple
            />
          </FormItem>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={6} style={{ textAlign: 'right' }}>
          <Button type="submit" theme="primary">
            提交
          </Button>
        </Col>
        <Col span={6} style={{ textAlign: 'left' }}>
          <Button type="reset" theme="default">
            重置
          </Button>
        </Col>
      </Row>
    </Form>
  </div>
}

export default AddModule
